<template>
    <div class="aboutUs">
        <div class="switchBtn" :style="popupVisible ? 'border: .5px solid #d81e06' : 'border: .5px solid #5ABF46;'" @click="popupVisible = !popupVisible">
            <img v-if="popupVisible" class="list-item-icon" src="../assets/about_us_red.png"/>
            <img v-else class="list-item-icon" src="../assets/about_us_green.png"/>
        </div>
        <mt-popup v-model="popupVisible" position="bottom">
            <mt-cell title="国内客服: +864001005295">
                <a href="tel:+864001005295"><mt-button size='small' type="primary" plain>拨打</mt-button></a>
            </mt-cell>
            <mt-cell title="北美客服: +18888280899">
                <a href="tel:+18888280899"><mt-button size='small' type="primary" plain>拨打</mt-button></a>
            </mt-cell>
            <mt-cell title="客服微信: kbxmei">
                <span id="wechatNum">kbxmei</span>
                <mt-button size='small' type="primary" id="copyBtn" @click.native="copyWechatNum" data-clipboard-target="#wechatNum" plain>复制</mt-button>
            </mt-cell>
            <div class="wechatImg">
                <img src="../assets/kbxmei.jpeg" alt="">
            </div>
            <mt-button class="cancelBtn" @click.native="popupVisible = false" type="default" plain>取消</mt-button>
        </mt-popup>
       
    </div>
</template>

<script>
import '../assets/js/clipboard.min.js'
import { Toast } from 'mint-ui';
export default {
  name: "AboutUs",
  data() {
    return {
      popupVisible: false
    };
  },

  methods: {
    copyWechatNum() {
      var clipboard = new Clipboard("#copyBtn");
      clipboard.on("success", function() {
        Toast({message: '复制成功',duration: 1000})
      });
      clipboard.on("error", function() {
        Toast({message: '复制失败',duration: 1000})
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/base";
.aboutUs {
   z-index:4;
  .switchBtn {
    position: fixed;
    z-index: 4;
    right: rpx(32);
    bottom: rpx(150);
    width: rpx(70);
    height: rpx(70);
    border-radius: 50%;
    border: 1px solid #5abf46;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 60%;
      height: 60%;
    }
  }
  .mint-popup {
    width: 100%;
    min-height: 60%;
    z-index: 10000 !important;
    padding: rpx(32);
    .wechatImg {
      text-align: center;
      img {
        width: 50%;
      }
    }
    .cancelBtn {
      margin-top: rpx(20);
      width: 100%;
    }
    #wechatNum {
      width: rpx(20);
      opacity: 0;
    }
  }
}
</style>
